<template>
  <div id="Home">
    <TopHeight />
    <!-- 第一块 -->
    <el-row :gutter="20" class="margin_t_20 margin_b_20">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card_box">
            <div class="card_l">
              <div class="title margin_b_20">今日收入</div>
              <div class="number">￥2189.00</div>
            </div>
            <div class="card_r">
              <TodayRevenue />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card_box">
            <div class="card_l">
              <div class="title margin_b_20">产品销量</div>
              <div class="number">1065</div>
            </div>
            <div class="card_r">
              <ProductSold />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card_box">
            <div class="card_l">
              <div class="title margin_b_20">新用户数</div>
              <div class="number">10</div>
            </div>
            <div class="card_r">
              <NewCustomers />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="card_box">
            <div class="card_l">
              <div class="title margin_b_20">新访客数</div>
              <div class="number">20</div>
            </div>
            <div class="card_r">
              <NewVisitors />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第一块END -->
    <!-- 第二块 -->
    <el-row :gutter="20" class="margin_t_20 margin_b_20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>综合</span>
          </div>
          <div class="box-body">
            <div class="item">
              <div class="item_l">
                <span>121,000</span>
                <p>总访客数</p>
              </div>
              <div class="item_r">
                <i class="el-icon-s-custom" />
              </div>
            </div>
            <el-divider />
            <div class="item">
              <div class="item_l">
                <span>21,000</span>
                <p>总产品建议</p>
              </div>
              <div class="item_r">
                <i class="el-icon-s-comment" />
              </div>
            </div>
            <el-divider />
            <div class="item">
              <div class="item_l">
                <span>11,000</span>
                <p>活跃VIP数</p>
              </div>
              <div class="item_r">
                <i class="el-icon-s-finance" />
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>收入</span>
          </div>
          <div class="box-body">
            <Revenue />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>目标</span>
          </div>
          <div class="box-body">
            <Targets />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二块END -->
    <!-- 第三块 -->
    <el-row :gutter="20" class="margin_t_20 margin_b_20">
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>销售类别统计</span>
          </div>
          <div class="box-body">
            <SalesCategory />
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>最新订单</span>
          </div>
          <div class="box-body">
            <RecentOrders :table-data="tableData" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第三块END -->
    <!-- 第四块 -->
    <el-row :gutter="20" class="margin_t_20">
      <el-col :span="10">
        <el-card class="box-card new_box_card">
          <div slot="header" class="clearfix">
            <span>优秀员工</span>
          </div>
          <div class="box-body">
            <TopPerformers :top-performers-list-data="TopPerformersListData" />
          </div>
        </el-card>
      </el-col>

      <el-col :span="14">
        <el-card class="box-card new_box_card">
          <div slot="header" class="clearfix">
            <span>任务</span>
            <el-button style="float: right; padding: 3px 0" type="text">查看全部</el-button>
          </div>
          <div class="box-body">
            <Tasks :tasks-list-data="TasksListData" />
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第四块END -->
  </div>
</template>

<script>
import TopHeight from './components/TopHeight' // 小头部
import TodayRevenue from './components/Echarts/TodayRevenue' // 今日收入统计
import ProductSold from './components/Echarts/ProductSold' // 销售商品
import NewCustomers from './components/Echarts/NewCustomers' // 新用户数
import NewVisitors from './components/Echarts/NewVisitors' // 新访客数
import Revenue from './components/Echarts/Revenue' // 收入
import Targets from './components/Echarts/Targets' // 目标
import SalesCategory from './components/Echarts/SalesCategory' // 销售类别统计
import RecentOrders from './components/RecentOrders' // 最近的订单列表
import TopPerformers from './components/TopPerformers' // 优秀员工
import Tasks from './components/Tasks' // 任务
export default {
  name: 'Home',
  components: {
    TopHeight, // 小头部
    TodayRevenue, // 今日收入统计
    ProductSold, // 销售商品
    NewCustomers, // 新用户数
    NewVisitors, // 新访客数
    Revenue, // 收入
    Targets, // 目标
    SalesCategory, // 销售类别统计
    RecentOrders, // 最近的订单列表
    TopPerformers, // 优秀员工
    Tasks // 任务
  },
  data() {
    return {
      // 最新订单列表
      tableData: [
        {
          product: 'ASOS Ridley High', // 商品名称
          customer: 'Otto B', // 客户
          price: '￥79.49', // 价格
          status: '0' // 状态，0 待支付 1 已下单 2 未出库 3 出库中 4 已出库 5 运输中 6 待收货 7 已收货 8 待评价 9 已完成
        },
        {
          product: 'Marco Lightweight Shirt', // 商品名称
          customer: 'Mark P', // 客户
          price: '￥125.49', // 价格
          status: '1' // 状态，
        },
        {
          product: 'Half Sleeve Shirt', // 商品名称
          customer: 'Dave B', // 客户
          price: '￥35.49', // 价格
          status: '2' // 状态，
        },
        {
          product: 'Lightweight Jacket', // 商品名称
          customer: 'Shreyu N', // 客户
          price: '￥49.49', // 价格
          status: '3' // 状态，
        },
        {
          product: 'Marco Shoes', // 商品名称
          customer: 'Rik N', // 客户
          price: '￥69.49', // 价格
          status: '4' // 状态，
        },
        {
          product: 'Marco Shoes', // 商品名称
          customer: 'Rik N', // 客户
          price: '￥69.49', // 价格
          status: '5' // 状态，
        },
        {
          product: 'Marco Shoes', // 商品名称
          customer: 'Rik N', // 客户
          price: '￥69.49', // 价格
          status: '6' // 状态，
        }
      ],
      // 优秀员工列表
      TopPerformersListData: [
        {
          portrait: '', // 头像
          name: 'Shreyu N', // 姓名
          title: '高级销售',
          id: '00001'
        },
        {
          portrait: '', // 头像
          name: 'Greeva Y', // 姓名
          title: '高级销售',
          id: '00002'
        },
        {
          portrait: '', // 头像
          name: 'Greeva Z', // 姓名
          title: '高级销售',
          id: '00003'
        }
      ],
      // 任务模块
      TasksListData: [
        {
          id: '1',
          title: '为销售团队起草新的合同文件',
          time: 1643695701000
        },
        {
          id: '2',
          title: 'iOS应用程序主页',
          time: 1643522901000
        },
        {
          id: '3',
          title: '给Shreyu写个释放便条',
          time: 1643522901000
        }
      ]
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {}
}
</script>

<style lang='scss' scoped>
.card_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .card_l {
    .title {
      font-size: 1.2rem;
      font-weight: bold;
      color: #6c757d;
    }
    .number {
      font-size: 2rem;
      font-weight: bold;
    }
  }
}
.box-card{
  .el-card__header{
    span{
      font-size: 1.2rem;
      font-weight: bold;
      color: #6c757d;
    }
  }
  .box-body{
    .item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item_l{
        span{
          font-size: 1.6rem;
          color: #6c757d;
        }
        p{
          margin: 10px 0;
          font-size: 1.2rem;
          font-weight: bold;
          color: #6c757d;
        }
      }
      .item_r{
        font-size: 3rem;
        color: #6c757d;
      }
    }
  }
}

</style>
